﻿<%@ Control Language="C#" AutoEventWireup="true" Inherits="Controls_MapControl" CodeBehind="MapControl.ascx.cs" %>
<style>
    #map_canvas
    {
        width: 700px;
        height: 500px;
    }
    .map_description
    {
        color: #000000;
        width: 275px;
        overflow: auto;
    }
    .map_description .default
    {
        color: #FF0000;
    }
    .map_description div
    {
        margin: 3px;
        line-height: 17px;
    }
    .map_list_address
    {
        float: left;
        width: 250px;
        height: 500px;
        overflow: hidden;
    }
    .map_list_address .list
    {
        line-height: 17px;
        margin-bottom: 5px;
    }
    .map_list_address span
    {
        color: #FF0000;
    }
    .map_title
    {
        color: #107ade;
        font-weight: bold;
    }
    .navigate .C
    {
        width: 974px;
    }
</style>
<%-- <div class="map_list_address">
        <div class="list" style="width: 250px; float: left;">
            <asp:Repeater ID="rpBanDos" runat="server">
                <ItemTemplate>
                    <div>
                        <a onclick='javascript:moveToMaker(<%#Eval("ID") %>)' href="#map">
                            <%#Eval("MoTa")%>
                            (<font lang="vi">Xem trên bản đồ</font>)</a>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>--%>
<div id="map_canvas" style="width: 99%;">
</div>
<div class="clear">
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" language="javascript">
    var defaultLatLng = new google.maps.LatLng(20.829664, 106.677139);
    var myOptions = {
        zoom: 14,
        center: defaultLatLng,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var infowindow;
    var marker = new Array();
    var old_id = 0;
    var top = 0.2;
    var infoWindowArray = new Array();
    var infowindow_array = new Array();
    var default_id;

    function initialize(ID, moTa, toaDo) {

        var temp = new Array();
        temp = toaDo.split(',');
        var lat = parseFloat(temp[0]);
        var lon = parseFloat(temp[1]);

        var arrLatLng = new google.maps.LatLng(lat, lon);
        map.setCenter(arrLatLng);
        infoWindowArray[ID] = '<div class="map_description">' + moTa + '</div>';

        loadMarker(arrLatLng, infoWindowArray[ID], ID);

        moveToMaker(default_id);
    }

    function loadMarker(myLocation, myInfoWindow, id) {
        marker[id] = new google.maps.Marker({ position: myLocation, map: map, visible: true });
        var popup = myInfoWindow;
        infowindow_array[id] = new google.maps.InfoWindow({ content: popup });

        //infowindow_array[id].open(map, marker[id]);

        google.maps.event.addListener(marker[id], 'mouseover', function () {
            if (id == old_id) return;
            if (old_id > 0) infowindow_array[old_id].close();
            infowindow_array[id].open(map, marker[id]);
            old_id = id;

        });

        google.maps.event.addListener(infowindow_array[id], 'closeclick', function () { old_id = 0; });
    }

    function moveToMaker(id) {
        if (id == old_id) return;
        if (old_id > 0) infowindow_array[old_id].close();
        infowindow_array[id].open(map, marker[id]);
        old_id = id;
    }

    $(document).ready(function () {
        GetBanDos();
    });

    function GetBanDos() {
        $.ajax({
            type: "POST",
            url: "Webservice.asmx/GetBanDos",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                var count = result.d.length;
                default_id = result.d[0].ID;

                for (i = 0; i < count; ++i) {
                    initialize(result.d[i].ID, result.d[i].MoTa, result.d[i].ToaDo);
                }
            }
        });
    }
          
</script>
